<template>
  <div>
    <h2>充电中</h2>
    <p>订单编号: {{ orderId }}</p>
    <p>电量百分比: {{ status.power }}%</p>
    <p>剩余时间: {{ status.timeRemaining }}</p>
    <p>当前费用: ¥{{ status.currentCost }}</p>
    <button @click="stopCharging">停止</button>
  </div>
</template>

<script>
import api from "@/api";

export default {
  data() {
    return {
      orderId: this.$route.params.orderId,
      status: {},
    };
  },
  mounted() {
    this.fetchStatus();
    this.interval = setInterval(this.fetchStatus, 5000); // 每5秒刷新状态
  },
  beforeUnmount() {
    clearInterval(this.interval);
  },
  methods: {
    async fetchStatus() {
      try {
        const response = await api.getChargingStatus(this.orderId);
        this.status = response.data;
      } catch (error) {
        alert("获取状态失败：" + error.message);
      }
    },
    async stopCharging() {
      try {
        await api.stopCharging(this.orderId);
        this.$router.push(`/charging/${this.orderId}/details`);
      } catch (error) {
        alert("停止失败：" + error.message);
      }
    },
  },
};
</script>
